{# SPDX-FileCopyrightText: © 2014-2018 Siemens AG

   SPDX-License-Identifier: FSFAP
#}
{% extends "include/base.html.twig" %}
{% block styles %}
  {{ parent() }}
  <link rel="stylesheet" href="css/jquery.treeview.css"/>
{% endblock %}

{% block content %}
  <!-- The browse Modal -->
  <div class="modal" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Enter Comment</h4>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          <form name="rejector">
            <div>{{ 'Please enter a reason for status change'|trans }}</div>
            <textarea id="commentText" style="overflow:auto;resize:none;width:100%;height:80px;" name="commentText"></textarea>
          </form>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" onclick="closeCommentModal();" data-dismiss="modal">{{ 'Cancel'|trans }}</button>
          <button type="button" class="btn btn-success" onclick="submitComment();" data-dismiss="modal">{{ 'Ok'|trans }}</button>
        </div>
      </div>
    </div>
  </div>

  <table border="1" width="100%">
    <tr>
      <td valign="top" style="width:20%;min-width:280px;" id="nav-cell">
        <span class="btn btn-outline-danger" id="nav-hider" style="float:right;">X</span>
        <div style="text-align:center;" class="btn"><strong><u>{{ 'Folder Navigation'|trans }}</u></strong></div>
        {{ folderNav }}
      </td>
      {# <td valign="top" style="background: #efefef; width:1px; font-family:monospace; word-break:break-all;" id="nav-shower" hidden>
          &raquo;&nbsp;{{ 'Folder Navigation'|trans|replace({' ':'&nbsp;'}) }}&nbsp;&raquo;
      </td> #}
      <td valign="top">
        <span class="btn btn-outline-info" id="nav-shower" hidden style="float:left; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;">></span>
        <div style="text-align:center;font-size:large;"><strong><u>{{ 'Uploads'|trans }} {{ 'in'|trans }} <span id="current-folder">{{ folderName }}</span></u></strong></div>
        <form name="uploadMultiSelect">
        <table class="semibordered" id="browsetbl" width="100%" cellpadding="0">
        <thead>
         <tr>
           <th id="insert_browsetbl_filter"></th>
           <th></th>
           <th>
             <select id="statusSelector" class="form-control-sm" onchange="filterStatus();">
               <option value="0" selected> </option>
            {% for key,disp in statusOptions %}
              <option value="{{ key }}">{{ disp }}</option>
            {% endfor %}
             </select>
           </th>
           <th></th>
           <th></th>
           <th></th>
           <th>
             <select id="assigneeSelector" style="max-width:250px;" class="form-control-sm" onchange="filterAssignee();">
             {% for key,disp in assigneeOptions %}
               <option value="{{ key }}" {%if key == 0 %} selected{% endif %}>{{ disp }}</option>
             {% endfor %}
             </select>
           </th>
         </tr>
         <tr><th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th></tr>
        </thead>
        <tbody></tbody>
        <tfoot></tfoot>
        </table>
        <br/>
        {% if multiUploadAgents is not empty %}
          <input type="hidden" name="mod" id="mod" value=""/>
          {{ 'Select'|trans }}
          <input type="checkbox" name="folder" checked="checked" id="browse-upload-all" value="{{ folderId }}" data-toggle="toggle" data-on="Whole folder" data-off="Marked uploads" data-onstyle="outline-success" data-offstyle="outline-success">
          {{ 'to run'|trans }}:
          {% for muAgent,muDesc in multiUploadAgents %}
            <input type="submit" value="{{ muDesc }}" name="{{ muAgent }}" class="multi-upload-agent btn btn-default"/>
          {% endfor %}
        {% endif %}
        </form>
      </td>
    </tr>
  </table>
{% endblock %}

{% block foot %}
  {{ parent() }}
  <script src="scripts/jquery.dataTables.min.js" type="text/javascript"></script>
  <script src="scripts/jquery.dataTables.select.js" type="text/javascript"></script>
  <script src="scripts/browse.js" type="text/javascript"></script>
  <script src="scripts/tools.js" type="text/javascript"></script>
  <script src="scripts/jquery.treeview.js" type="text/javascript"></script>
  <script src="scripts/bootstrap4-toggle.min.js"></script>
  <link href="css/bootstrap4-toggle.min.css" rel="stylesheet">
  <script type="text/javascript"> {% include 'ui-browse.js.twig' %}</script>
{% endblock %}
